<template>
  <div class="box">
    <p>搜索"{{ value }}"</p>
    <ul v-if="arr">
      <li
        v-for="(item, index) in arr"
        :key="index"
        @click="jumpSearchList(item.keyword)"
      >
        <span class="magnifier"></span>
        <div>
          <span>{{ item.keyword }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    arr: Array,
    value: String,
  },
  methods: {
    jumpSearchList(word) {
      this.$router.push({
        path: "/searchlist",
        query: {
          word,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  z-index: 1;
  background-color: white;
  width: 100vw;
  text-align: left;
  height: 80vh;
  position: absolute;
  top: 175px;
  padding: 10px;

  p {
    font-size: 14px;
    color: #507daf;
    line-height:40px;
    border-top: 1px solid #f1f2f3;
    border-bottom: 1px solid #f1f2f3;
  }
}
ul {
  li {
    width: 85vw;
    display: flex;
    align-items: center;
    font-size: 15px;
    border-radius: 10px;
    border-bottom: 1px solid #f1f2f3;
    line-height:40px;


    &:hover {
      background-color: #ebebec;
    }
    div {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .artist::after {
      content: "/";
    }
    .artist:last-of-type {
      &::after {
        content: "";
      }
    }
    .magnifier {
      background: url("../assets/search.png") no-repeat 0 0 / contain;
      width: 5vw;
      height: 5vw;
      display: block;
      margin-right: 10px;
    }
  }
}
</style>